﻿/// <reference path="../jquery-1.5.1-vsdoc.js" />

index = 0;
interval = 5000;
timeoutHandle = null;
$(function () {
    index = 1;
    timeoutHandle = setTimeout(effectChangeImage, interval);
});


effectChangeImage = function () {
    var img = $(".imageshow[index=" + index + "]");
    if (img.css("display") == 'none') {
        $(".imageshow").css('display', 'none');
        $(".imageshow").filter(function () {
            var currentIndex = $(this).attr("index");
            return currentIndex >= index && currentIndex < index + 5;
        }).css('display', 'block');
    }
    var current = $(".currentshow");
    if (current != undefined)
        current.removeClass("currentshow");
    img.addClass("currentshow");

    $(".detail-image").fadeOut(1000, function () {
        $(this).attr("src", img.attr("src"));
        $(this).fadeIn(1500, function () {
            index++;
            if (index > ($(".imageshow").length - 1)) {
                index = 0;
            }
            timeoutHandle = setTimeout(effectChangeImage, interval);
        });
    });
}

stopAnimate = function () {
    var animateIamge = $(".detail-image");
    clearTimeout(timeoutHandle);
    animateIamge.stop();
    clearTimeout(timeoutHandle);
    animateIamge.css("opacity", 1);
}

$(".imageshow").hover(
    function () {
        var animateIamge = $(".detail-image");
        stopAnimate();
        index = $(this).attr("index");
        if ($(this).hasClass("currentshow")) {
            index++;
            timeoutHandle = setTimeout(effectChangeImage, interval);
        }
        else
            timeoutHandle = setTimeout(effectChangeImage, 10);
    }
 );
$(".first-image").click(function () {
    var $imageDisplay = $(".imageshow").filter(function () {
        return $(this).css("display") == 'block';
    });
    var $min = $imageDisplay.first();
    if ($min == undefined)
        return;
    $imageDisplay.each(function (index, value) {
        if ($(value).attr("index") < $min.attr("index")) {
            $min = $(value);
        }
    });
    var myIndex = parseInt($min.attr("index")) - 5;
    while (myIndex < 0)
        myIndex++;
    stopAnimate();
    index = myIndex;
    setTimeout(effectChangeImage, 10);
});

$(".last-image").click(function () {
    var $imageDisplay = $(".imageshow").filter(function () {
        return $(this).css("display") == 'block';
    });
    var $max = $imageDisplay.first();
    if ($max == undefined)
        return;
    $imageDisplay.each(function (index, value) {
        if ($(value).attr("index") > $max.attr("index")) {
            $max = $(value);
        }
    });
    var myIndex = parseInt( $max.attr("index")) + 1;
    if (myIndex > $(".imageshow").length - 1)
        return;
    stopAnimate();
    index = myIndex;
    setTimeout(effectChangeImage, 10);
});
